<template>
  <div>
    <div>
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <el-select class="select-class" v-model="orderQuery.textCol">
            <el-option label="订单号" value="orderNo"></el-option>
            <el-option label="收货人" value="customerNickname"></el-option>
            <el-option label="收货人电话" value="customerPhone"></el-option>
            <el-option label="商品名称" value="goodsTitle"></el-option>
          </el-select>
          <el-input class="width-200" v-model="orderQuery.textValue" placeholder="请输入内容"></el-input>
          <el-select class="select-class pad-l-10" v-model="orderQuery.timeCol">
            <el-option label="下单时间" value="createTime"></el-option>
            <el-option label="付款时间" value="payTime"></el-option>
            <el-option label="发货时间" value="deliveryTime"></el-option>
            <el-option label="收货时间" value="receivedTime"></el-option>
            <el-option label="完成时间" value="completeTime"></el-option>
          </el-select>
          <el-date-picker v-model="orderQuery.timeValue" 
            type="daterange" 
            range-separator="至" 
            value-format="yyyy-MM-dd HH:mm:ss" 
            :default-time="['00:00:00', '23:59:59']" 
            start-placeholder="开始日期" 
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
        <span style="font-size: 18px">合计产生金额：<span style="color: red">￥{{ countAmount }}</span></span>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="orderList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
          <el-table-column width="350px" label="订单信息" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p" @click="showDetail(scope.row)">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div v-if="scope.row.goodsTitle.length <= 20">{{scope.row.goodsTitle}}</div>
                  <div v-if="scope.row.goodsTitle.length > 20">{{scope.row.goodsTitle.slice(0,20) + '...'}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="订单号" prop="orderNo"></el-table-column>
          <el-table-column width="160px" label="收货人">
            <template slot-scope="scope">
              <div v-if="scope.row.customerNickname">
                <div>{{scope.row.customerNickname}}</div>
                <div v-if="scope.row.customerPhone">{{scope.row.customerPhone}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="实付金额" prop="actualPrice" align="right">
            <template slot-scope="scope">
              <div v-if="scope.row.actualPrice">
                <div>￥{{scope.row.actualPrice}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="实收金额" prop="enterpriseAmount" align="right">
            <template slot-scope="scope">
              <div v-if="scope.row.enterpriseAmount">
                <div>￥{{scope.row.enterpriseAmount}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="时间" align="center">
            <template slot-scope="scope">
              {{ scope.row[orderTimeCols[scope.row.orderStatus]] }}
            </template>
          </el-table-column>
          <el-table-column width="160px" label="订单状态" align="center">
            <template slot-scope="scope">
              <template>
                {{ dict.orderStatus[scope.row.orderStatus] }}
              </template>
            </template>
          </el-table-column>
          <el-table-column min-width="140px" label="操作" fixed="right" align="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="showDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { pagingMemberProjectOrder, countMemberProjectOrder } from '@/api/goods/order'

  export default {
    props: {
      memberId: {
        type: String
      }
    },
    data() {
      return {
        // 查询对象
        searchListQuery: {},
        // 默认查询对象
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          orderType: 31,
          currentPage: 1,
          size: 10
        },
        // 数据字典
        dict: {
          orderStatus: {}
        },
        orderQuery: {
          timeCol: 'createTime',
          timeValue: [],
          textCol: 'orderNo',
          textValue: ''
        },
        orderTimeCols: {
          '0': 'createTime',
          '1': 'payTime',
          '2': 'deliveryTime',
          '3': 'receivedTime',
          '4': 'completeTime'
        },
        // 合计金额
        countAmount: 0,
        total: 0,
        listLoading: false,
        // 订单集合
        orderList: []
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      this.init()
    },
    filters: {
    },
    mounted() {
    },
    methods: {
      // 初始化
      init() {
        this.listLoading = true
        this.setSearchListQuery()
        this.searchListQuery.memberId = this.memberId
        pagingMemberProjectOrder(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.orderList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
        countMemberProjectOrder(this.searchListQuery).then(response => {
          if (response.isError) return
          this.countAmount = response.data.countAmount
        })
      },
      // 设置查询条件
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.size = size
        this.searchListQuery.dateColumn = this.orderQuery.timeCol
        this.searchListQuery.startDate = (this.orderQuery.timeValue && this.orderQuery.timeValue.length > 0) ? this.orderQuery.timeValue[0] : ''
        this.searchListQuery.endDate = (this.orderQuery.timeValue && this.orderQuery.timeValue.length > 1) ? this.orderQuery.timeValue[1] : ''
        this.searchListQuery[this.orderQuery.textCol] = this.orderQuery.textValue
      },
      // 查询事件
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      // 重置事件
      resetSearch() {
        this.searchListQuery = { ... this.defaultQuery }
        this.orderQuery = {
          timeCol: 'createTime',
          timeValue: [],
          textCol: 'orderNo',
          textValue: ''
        }
        this.init()
      },
      // 调整订单详情
      showDetail(row) {
        this.$router.push({ path: '/order/order/detail/index', query: { orderId: row.orderId }})
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      }
    }
  }
</script>

<style lang="less" scoped>
.select-class {
  margin-right: -5px;
  width: 120px;
}
.user-avatar {
  width: 90px;
  height: 90px;
  display: block;
  padding: 1px;
  border: #efefef 1px solid;
}
</style>